<template>
  <view class="vision">
    <view class="box">
      <text></text>
      <text class="text">温馨提示:选项都是默认位“否”,存在该症状请点击“是”</text>
      <view class="scroll">
      <view class="question-container" v-for="(question, index) in state.questions" :key="index"> 
        <text class="question">{{ index+1 }}.{{'是否具有'+ question.content }}</text>
        <view class="border"></view>  
        <radio-group class="radio-group" @change="handleRadioChange(index, question,$event.target.value)">  
          <label class="radio-label" v-for="(option,index_option) in options" :key="option.value">  
            <radio :value="option.value" :checked="index_option === current"/>
            <text>{{ option.label}}</text>
          </label>  
        </radio-group>  
      </view>
      </view>
      <picker
            mode="selector"
           :range="range"
            :value="selectedVision" 
            @change="pickerChange" 
            @tap="isPicker"
          >
          <text class="question1">{{ four }}.{{ four_title }}</text>
          <text v-if="flag" class="picker">{{'('+ range[selectedVision] +')'}}</text>
      </picker>
      <view class="border1"></view>
    </view>
    <view class="foot_box">
      <view class="foot-container">
        <text class="foot1" @tap="back">上一步</text>
        <text class="foot2">1/8</text>
        <text class="foot3" @tap="next">下一步</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref,reactive,computed} from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {getVisionListApi,postVisionApi} from '@/apis/vision/vision'
import { useMarkStore } from '@/stores/modules/mark';
const useMark = useMarkStore()
/* const uuid = ref(0)
const uuid1 = ref(0)
const uuid2 = ref(0) */
const four = ref(4)
const four_title =ref('点击选择自己的视力')
const range = []
const selectedVision= ref(0)
const flag = ref(false)
const back = ()=>{
  uni.navigateBack()
}
for(let i=4.0;i<=5.3;i+=0.1)//picker数组
{
  let roundedValue = Math.round(i * 10) / 10;  
    range.push(roundedValue); 
}
const pickerChange = (e)=>{//picker改变触发回调函数
  selectedVision.value = e.detail.value
  flag.value = true
}
const isVision = ref(false)
const isPicker = ()=>{
  isVision.value = true
}
/* const getUuid =async ()=>{
 const res = await wx.getRandomValues({length: 12 })
 uuid.value = wx.arrayBufferToBase64(res.randomValues)
 const res1 = await wx.getRandomValues({length: 12 })
 uuid1.value = wx.arrayBufferToBase64(res.randomValues)
 uuid2.value=uuid1.value+uuid.value
 console.log('uuid:',uuid2.value)
} */
const current = ref(1)
const state = reactive({
  questions:[]
})
const selected=[]
const options = reactive([
  {value:'yes',label:'是'},
  {value:'no',label:'否'},
])
const handleRadioChange = (index,question,targetValue)=>{//radio框的值改变触发回调函数
  if(targetValue==='yes')
  {
    selected[index].result=1
  }
  else{
    selected[index].result=0
  }
}
const next =async ()=>{//提交
  if(isVision.value)
  {
    console.log('视力值：',range[selectedVision.value])
  selected.push({mark:useMark.mark,score:range[selectedVision.value]})
  console.log('问题：',selected)
   const res =await postVisionApi(selected) 
   console.log('返回结果：',res.msg)
  uni.navigateTo({ url: '/pages/fallRiskList/components/balance/balance' })
  }
  else{
    uni.showToast({
      title: '请选择你当前的视力值',
      icon: 'none',
      mask: true,
      duration:1500
    })
  }
}

const questionObject = {mark:useMark.mark,tsBaseVisionId:'0',result:0}
const getVisionList = async ()=> {//获得vision题库
  const res = await getVisionListApi()
  console.log('我是自评表数据',res.data)
  state.questions=res.data
  if(res.code===200){
     setSelected()
  }
  console.log(state.questions,'我是返回的表数据')
}
 onLoad(()=>{//页面加载时调用函数
  getVisionList()
})
const setSelected = ()=>{
  for(let i=0;i<state.questions?.length;i++)
{
  selected.push({mark:useMark.mark,tsBaseVisionId:state.questions[i]?.id,result:0})
}
console.log('我是seleted',selected) 
}
</script>

<style lang="scss" >

page {
  background-color: rgb(10,127,255);
}
.vision{
  height:100vh;
  position: relative;
  .box{
    margin: 30rpx;
    border-radius: 20rpx;
    background-color: #fff;
    padding: 0;
   height: 95%;
    .text{
  font-size: 25rpx;
  color:red;
  margin-left: 50rpx;
  margin-top: 30rpx;
}
.scroll{
  margin-top: 15rpx;
.question-container {  
  margin-bottom: 40rpx;/* 每个问题之间的间距 */  
.question {   
  margin-bottom: 40rpx; 
  margin-left: 50rpx;
}  
.border{
  height: 3rpx;
  width: 600rpx;
  background-color: #eee;
  margin-top: 20rpx;
  margin-left: 50rpx;
  margin-bottom: 15rpx;
}
.radio-group {   
  margin-left: 50rpx;
.radio-label {   
  padding-top: 30rpx; 
  padding-right: 200rpx; 
}  
}
}
}
.question1 {   
  margin-bottom: 40rpx; 
  margin-left: 50rpx;
  padding-right: 40rpx;
}  
.border1{
  height: 3rpx;
  width: 600rpx;
  background-color: #eee;
  margin-top: 30rpx;
  margin-left: 50rpx;
}
}
.foot_box{
    position:fixed;
    bottom: 2rpx;
    height: 100rpx;
    width: 100%;
    background-color: #fff;
    .foot-container{
      margin: 15rpx;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .foot1, .foot2, .foot3{
        font-size: 35rpx;
        color: black;
      }
      .foot2{
        text-align: center;
      }
    }
  }
}


</style>